<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        table {
            margin: 200px auto;
            border-collapse: collapse;
        }
        td {
            width: 30px;
            height: 30px;
        }
        td.black {
            background-color:#444;
        }
        td div {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #0a628f;
        }
        td div.red {
            background-color: #c00;
        }
    </style>
</head>
<body>
    <table id="tab" cellspacing="0" cellpadding="0"></table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script>
    $(function(){
        var queen=(function(){
            var self,config;
            var $tab;

            return {
                init:function(opts){                
                    self=this;
                    config=opts;
                    $tab=opts.$tab;
                    this.draw();
                    this.bind();
                    return this;
                },
                draw:function(){
                    var html='',count=0;
                    for(var i=0;i<config.size;i++){
                        html+='<tr>';
                        for(var j=0;j<config.size;j++){
                            html+='<td data-x="'+i+'" data-y="'+j+'"'+(count%2?' class="black"':'')+'></td>';
                            count++;
                        }
                        html+='</tr>';
                        count--;
                    }
                    $tab.html(html);
                },
                bind:function () {
                    $tab.on('click','td',function(){
                        var has=$(this).find('div');
                        if(has.length){
                            $(this).empty();
                            $tab.find('div').removeClass('red');
                        }else{
                            var yet=self.checkAll($(this));
                            if(yet.length){
                                yet.forEach(function(cell){
                                    $tab.find('tr').eq(cell[0]).find('td').eq(cell[1]).find('div').addClass('red');
                                });
                                $(this).append('<div class="red"/>');
                            }else{
                                $tab.find('div').removeClass('red');
                                $(this).append('<div/>');
                            }
                        }
                    });
                },
                checkAll:function($cell){
                    var x=$cell.data('x'),y=$cell.data('y');
                    console.log('curr x/y:',x,y);

                    var left=self.check([x,y],[0,-1]);//正左
                    var right=self.check([x,y],[0,1]);//正右

                    var up=self.check([x,y],[-1,0]);//正上
                    var down=self.check([x,y],[1,0]);//正下

                    var leftUp=self.check([x,y],[-1,-1]);//左上
                    var rightDown=self.check([x,y],[1,1]);//右下
                    var rightUp=self.check([x,y],[-1,1]);//右上
                    var leftDown=self.check([x,y],[1,-1]);//左下

                    return [...left,...right,...up,...down,...leftUp,...rightDown,...rightUp,...leftDown];
                },

                check:function (point, dir,yet=[]) {
                    var x=point[0],y=point[1];
                    console.warn('check x/y:',x,y);

                    if(x<0 || y<0 || x>=config.size || y>=config.size)return yet;


                    var $divs=$tab.find('tr').eq(x).find('td').eq(y).find('div');
                    if($divs.length){
                        yet.push([x,y]);
                        console.log('yet x/y:',x,y);
                    }
                    x+=dir[0];
                    y+=dir[1];
                    return self.check([x,y],dir,yet);
                }

            }
        })();


        queen.init({
            $tab:$('#tab'),
            size:8
        });
    });
</script>
</html>